<template>
  <div class="mobile-tabbar" v-show="isMobile">
    <!-- 底部导航菜单 -->
    <van-tabbar v-model="activeTab" fixed safe-area-inset-bottom>
      <van-tabbar-item icon="home-o" @click="goToHome">
        首页
      </van-tabbar-item>
      <van-tabbar-item icon="apps-o" @click="toggleSidebar">
        菜单
      </van-tabbar-item>
      <van-tabbar-item icon="contact" @click="goToProfile">
        我的
      </van-tabbar-item>
    </van-tabbar>
    
    <!-- 点击遮罩层关闭侧边栏，不使用半透明背景，调整样式避免遮挡侧边栏 -->
    <div 
      class="click-outside-layer" 
      v-show="sidebar.opened" 
      @click.stop="closeSidebar"
    ></div>
    
    <!-- 页面内容区域底部内边距，防止被底部菜单遮挡 -->
    <div class="tabbar-placeholder"></div>
  </div>
</template>

<script>
import { isMobileViewport, addViewportChangeListener } from '@/utils/device';
import { mapGetters } from 'vuex';

export default {
  name: 'MobileTabbar',
  data() {
    return {
      isMobile: false,
      activeTab: 0
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  watch: {
    '$route': {
      handler(route) {
        // 根据路由设置激活的选项卡
        if (route.path === '/' || route.path === '/index') {
          this.activeTab = 0;
        } else if (route.path.includes('/user/profile')) {
          this.activeTab = 2;
        }
        
        // 只在移动设备上，路由变化时关闭侧边栏
        if (this.isMobile && this.sidebar.opened) {
        this.closeSidebar();
        }
      },
      immediate: true
    }
  },
  mounted() {
    // 使用设备检测工具监听视口变化
    addViewportChangeListener(this.handleViewportChange);
  },
  methods: {
    // 处理视口变化
    handleViewportChange(isMobileView) {
      this.isMobile = isMobileView;
    },
    
    // 跳转到首页
    goToHome() {
      // 关闭侧边栏
      this.closeSidebar();
      // 导航到首页
      this.navigateToPath('/');
    },
    
    // 显示/隐藏侧边栏菜单
    toggleSidebar() {
      this.$store.dispatch('app/toggleSideBar');
      
      // 更新侧边栏状态
      setTimeout(() => {
        const sidebarEl = document.querySelector('.sidebar-container');
        const isOpened = this.sidebar.opened;
        
        if (sidebarEl && isOpened) {
          sidebarEl.classList.add('sidebar-open');
        } else if (sidebarEl && !isOpened) {
          sidebarEl.classList.remove('sidebar-open');
        }
      }, 0);
    },
    
    // 关闭侧边栏
    closeSidebar() {
      // 如果侧边栏已经打开，则关闭它
      if (this.sidebar.opened) {
        this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
        
        // 移除侧边栏的sidebar-open类
        setTimeout(() => {
          const sidebarEl = document.querySelector('.sidebar-container');
          if (sidebarEl) {
            sidebarEl.classList.remove('sidebar-open');
          }
        }, 0);
      }
    },
    
    // 跳转到个人中心
    goToProfile() {
      // 关闭侧边栏
      this.closeSidebar();
      // 导航到个人中心
      this.navigateToPath('/user/profile');
    },
    
    // 导航到指定路径
    navigateToPath(path) {
      if (!path) {
        console.warn('尝试导航到空路径');
        return;
      }
      
      // 格式化路径 - 确保路径以/开头
      let targetPath = path;
      if (!targetPath.startsWith('/') && targetPath !== '/') {
        targetPath = '/' + targetPath;
      }
      
      // 如果当前已经在这个路径，不做任何操作
      if (this.$route.path === targetPath) {
        return;
      }
      
      // 处理重定向路径
      if (targetPath === '/index') {
        targetPath = '/';
      }
      
      // 尝试导航到路由
      try {
        this.$router.push(targetPath).catch(err => {
          // 忽略重复导航错误
          if (err.name !== 'NavigationDuplicated') {
            console.error('导航错误:', err);
            
            // 尝试其他可能的路径
            let alternativePath = null;
            
            // 1. 尝试添加或移除结尾的斜杠
            if (targetPath.endsWith('/')) {
              alternativePath = targetPath.slice(0, -1);
            } else {
              alternativePath = targetPath + '/';
            }
            
            // 2. 如果是根路径重定向，尝试/index
            if (targetPath === '/') {
              alternativePath = '/index';
            }
            
            // 尝试替代路径
            if (alternativePath) {
              this.$router.push(alternativePath).catch(() => {
                // 最终回退到首页
                if (targetPath !== '/' && alternativePath !== '/') {
                  this.$router.push('/').catch(() => {});
                }
              });
            }
          }
        });
      } catch (error) {
        console.error('导航尝试失败:', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mobile-tabbar {
  .tabbar-placeholder {
    height: 50px;
    width: 100%;
  }
  
  .click-outside-layer {
    // position: fixed; /* 使用fixed但调整z-index */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990; /* 降低z-index，确保在侧边栏下面 */
    background: transparent;
    pointer-events: auto;
  }
  
  ::v-deep .van-tabbar {
    height: 50px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
    z-index: 2001 !important;
    background-color: white;
  }
  
  ::v-deep .van-tabbar-item {
    color: #666;
    font-size: 12px;
    
    &--active {
      color: #1890ff;
    }
    
    .van-icon {
      font-size: 20px;
    }
  }
  
  // 确保在大屏上不显示
  @media screen and (min-width: 769px) {
    display: none !important;
  }
}
</style> 